<template>
	<div class="gridBox">
		<el-card>
			<div class="headerTitle">
				<div>总体接入情况</div>
				<div>
					<el-date-picker v-model="pickerTime" end-placeholder="结束时间" range-separator="至"
						start-placeholder="开始时间" type="datetimerange" />
				</div>
			</div>
			<div class="charts">
				<div class="total">
					<div>当前在线数<span>260</span></div>
					<div>当前启用数<span>260</span></div>
					<div>当前总数<span>250</span></div>
				</div>
				<div id="ztMain" :style="{ width: '500px', height: '400px' }"></div>
			</div>
		</el-card>
		<el-card>
			<div class="headerTitle" style="padding:17.5px 20px">
				<div>关键设备维护信息</div>
			</div>
			<div class="tableBar">
				<el-table  :data="equipData"
					 :header-cell-style="{
						'text-align': 'center',
						background: '#B4C7E7',
						color: '#333333',
					}"
					:cell-style="{
						'text-align': 'center',
						background: '#f5f8fb',
					}" size="small" border style="width: 100%">
					<el-table-column label="序号" type="index"></el-table-column>
					<el-table-column label="设备名称" prop="equipName"></el-table-column>
					<el-table-column label="检验（校准）日期" prop="ruleDate" width="180"></el-table-column>
					<el-table-column label="检查人" prop="inspector"></el-table-column>
					<el-table-column label="检查人手机" prop="inspectorIphone"></el-table-column>
					<el-table-column label="设备说明书" prop="instructions"></el-table-column>
				</el-table>
			</div>
		</el-card>
	</div>
</template>

<script setup>

import * as echarts from "echarts";
import { ref, onMounted, reactive } from "vue";
import { ProjectGroupone } from '@/api/model/echarts'
let pickerTime = ref('');
let equipData = reactive([
	{
		equipName: '',
		ruleDate: '',
		inspector: '',
		inspectorIphone: '',
		instructions: '',
	},
	{
		equipName: '',
		ruleDate: '',
		inspector: '',
		inspectorIphone: '',
		instructions: '',
	},

])
let state = reactive({

	a: {
		indicatorName: "总体接入情况",
		firstType: "设备总览",
		secondType: "",
		type: "year",
		thirdType: "",
		dataType: "year",
		dayFrom: "1900-01-01",
		dayTo: "2023-01-02"

	},

})
onMounted(() => {
	A()


})
async function A() {
	let res = await ProjectGroupone(state.a)
	console.log(res, '设备接入情况');
	var byear = []
	var num = []
	var num2 = []
	var num3 = []
	res.data.commonDailyDataList.forEach((item) => {
		byear.push(`${item.day.substring(5, 10)}`)

		if (item.type == 'type1') {
			num.push(item.number1)
		}
		if (item.type == 'type2') {
			num2.push(item.number1)
		}
		if (item.type == 'type3') {
			num3.push(item.number1)

		}
	})

	console.log(byear, '时间');
	let list = [...new Set(byear)]



	let myChart = echarts.init(document.getElementById('ztMain'));
	myChart.setOption(
		{
			tooltip: {
				trigger: 'axis'
			},
			xAxis: {
				type: 'category',
				data: list,
				axisLine: {
					show: true,
					lineStyle: {
						color: '#6e7079'
					}
				}
			},
			yAxis: {
				type: 'value',
				min: 0,
				max: 30,
				interval: 5,
				axisLine: {
					show: true,
					lineStyle: {
						color: '#6e7079'
					}
				}
			},
			legend: {
				orient: 'horizontal',
				itemHeight: 1,
				x: 'right',
				data: ['当前在线数', '当前启用数', '当前总数'],
				icon: "rect"
			},
			series: [
				{
					name: '当前在线数',
					data: num,
					type: 'line',
					color: '#dddddd'
				},
				{
					name: '当前启用数',
					data: num2,
					type: 'line',
					symbol: "none",
					color: '#d90909'
				},
				{
					name: '当前总数',
					data: num3,
					type: 'line',
					symbol: "none",
					color: '#fed24b'
				}
			],
		}
	)
}

</script>

<style lang="less" scoped>
.gridBox {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr;
	row-gap: 10px;
	column-gap: 10px;
}

:deep(.el-date-editor) {
	width: 210px;
}

:deep(.el-card__body) {
	padding: 0 !important;
}

.charts {
	margin-top: 20px;
	display: flex;
	align-items: flex-end;
	justify-content: space-around;

	.total {
		margin-bottom: 50px;

		div {
			margin-top: 30px;
			font-size: 14px;
			justify-content: space-between;
			display: flex;
			width: 125px;
		}

		span {
			font-size: 16px;
			color: #3f80cc;

		}
	}
}

.tableBar {
	margin-top: 20px;
	padding: 0 10px;

	:deep(.el-table) {
		thead {
			color: #4d4d4d;
		}
	}
}
</style>
